<template>
  <div class="son">
    <h3>子元素,后代元素(Son)</h3>
    <h3>{{fatherData}}</h3>
    <br>
    <h3>子元素数值:{{sonData}}</h3>
    <h3>子元素修改数值</h3>
    <input type="text" v-model="sonData" @input="sonDataChenge">
    <br>
    <br>
    <h3>祖先元素传值:{{$store.state.grData}}</h3>
  </div>
</template>

<script>
export default {
  name: "Son",
  props: ['fatherData','fatherDataTwo'],
  emits: ['son-data'],
  data() {
    return {
      sonData: 1
    }
  },
  methods: {
    sonDataChenge(e) {
      this.$emit('son-data', +this.sonData) 
      this.$emit('update:fatherDataTwo', +this.sonData)
      this.$store.commit('payload', +this.sonData)
    }
  }
};
</script>

<style lang="less" scoped>
.son {
  width: 300px;
  height: 300px;
  border: 3px solid DeepSkyBlue;
}
</style>
